<template>
  <div>
    <h3>历史数据</h3>
    <div v-for="record in historyData" :key="record.timestamp">
      <p>时间: {{ record.timestamp }}</p>
      <p>电压: {{ record.voltage }} V</p>
      <p>电流: {{ record.current }} A</p>
      <p>功率: {{ record.active_power }} W</p>
      <p>功率因数: {{ record.power_factor }}</p>
      <p>温度: {{ record.temperature }} ℃</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { defineProps } from 'vue';
import { deviceService } from "@/services";

const props = defineProps(['deviceId']);
const historyData = ref([]);

onMounted(async () => { 
  try {
    const response = await deviceService.getDeviceHistory(props.deviceId);
    historyData.value = response.data.history;
  } catch (error) {
    console.error("Error fetching device history:", error);
  }
});
</script>

<style scoped>
div {
  margin-bottom: 10px;
}
</style>
